<template>
	<view>
		
		<view class="ct0">
			<label>请假类型</label>
			<picker @change="typechange":range="typelist">
			<view class="ct1">{{typelist[typeindex]}} ></view>
			
			</picker>
		</view>
		<view class="ct2">
			<label>开始时间</label>
			<picker mode="date" @change="bindDateChange">
			<view class="ct3">{{date}} ></view>
			</picker>
		</view>
		
		<view class="ct0">
			<label>结束时间</label>
			<picker mode="date" @change="bindDateChange">
			<input class="input" placeholder="请选择结束时间 >" />
			</picker>
		</view>
		<view class="ct0">
			<label>请假时长</label>
		</view>
		
		<view class="ct5">
			<label>请假原因</label>
			<input class="input1" placeholder="请输入请假原因" />
			<image></image>
		</view>
	  
	
	    <view>
		<button type="primary"  size="default"  class="but"  @tap="submit">立即提交</button>
	    </view>
	
    </view>
</template>

<script>
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	
	export default {
		data() {
			
			return {
				formdata:{
					text:" ",
					date:"",
				},
				typeindex:0,
				typelist: ["公假", "私假", "病假", "事假"],
				date: getDate({
					format: true
				}),
				startDate:getDate('start'),
				endDate:getDate('end'),
			}
		},
		methods: {
			submit(){
				console.log(this.formdata)
			},
		       typechange(e){
				   this.typeindex = e.detail.value
			
		    },
	            bindDateChange: function(e) {
		           this.date = e.target.value
	        },
		}
	}
</script>

<style>
.ct0{
	display: flex;
	padding: 30rpx 25rpx;
	border-bottom: solid 0.5rpx #555555;
}
.ct1{
	padding-left: 450rpx;
}
.ct2{
	padding: 30rpx 25rpx;
	border-bottom: solid 0.5rpx #555555;
	display: flex;
}
.ct3{
	padding-left: 350rpx;
}
.ct4{
	
}
.ct5{
	padding: 30rpx 20rpx;
	border-bottom: solid 0.5rpx #555555;
}
.but{
	border-radius:80rpx;
	background-color: blue;
	padding-top: 5rpx;
	padding-bottom:5rpx;
}
.input{
	padding-left:200rpx;
}
.input1{
	padding-top: 30rpx;
}
</style>
